<template>
  <div class="">
      <el-form ref="form" :rules="rules" :model="form" :inline="true" label-width="120px" class="is-required">
        <el-form-item label="公司名称" prop="name" class="is-required">
          <el-input class="w174" v-model="form.name" placeholder="请输入公司中文名称"></el-input>
        </el-form-item>
        <el-form-item label="公司名称英文" prop="name" class="is-required">
          <el-input class="w174" v-model="form.nameEn" placeholder="请输入公司英文名称"></el-input>
        </el-form-item>
        <div></div>
        <el-form-item label="公司电话" class="is-required">
          <el-input class="w174" v-model="form.contactNumber" placeholder="请输入公司英文名称"></el-input>
        </el-form-item>
        <div></div>
        <el-form-item label="地址" prop="address" class="is-required">
          <ul class="formlist">
            <li v-for="(item,j) in addressList">
              <el-input class="w174" v-model="item.address" placeholder="请输入公司地址中文"></el-input>
              <el-input class="w174" v-model="item.addressEn" placeholder="请输入公司地址英文"></el-input>
              <i v-if="j==addressList.length-1" class="iconfont icon-jiahao" @click="addCall('addressList')"></i>
              <i v-else class="iconfont icon-jianhao" @click="delCall(item,j,'addressList')"></i>
            </li>
          </ul>
        </el-form-item>
        <div></div>
        <el-form-item label="邮编" prop="postcode" class="is-required">
          <el-input class="w174" v-model="form.postcode" maxlength='6'></el-input>
        </el-form-item>
        <div></div>
        <el-form-item label="客服时间" prop="serviceDayStart" class="is-required">
          <el-select class="w100" v-model="form.serviceDayStart" placeholder="请选择" @change="serviceDayStartChange">
            <el-option v-for="(item,j) in weeks" :key="j" :label="item.label" :value="j"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="至" label-width="25px">
          <el-select class="w100 mr20" v-model="form.serviceDayEnd" placeholder="请选择">
            <el-option v-for="(item,j) in weeksEnd" :key="j" :disabled="item.disabled" :label="item.label" :value="j"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" label-width="0">
          <el-time-picker value-format="HH:mm:ss" is-range v-model="form.serviceTime" range-separator="-"></el-time-picker>
        </el-form-item>
        <!-- <el-form-item label="至" label-width="25px">
          <el-time-picker class="w150" is-range v-model="form.time1" range-separator="-"></el-time-picker>
        </el-form-item> -->
        <div></div>
        <el-form-item label="客服电话" class="is-required">
          <ul class="formlist">
            <li v-for="(item,j) in callList">
              <!-- <el-form-item label="电话部门" label-width="90px" :class="item.nameCheck.isError?'is-error is-required':'is-required'">
                <el-input class="w174" v-model="item.name" placeholder="请输入部门名称" @input="inputChange(item,'nameCheck')" @blur="inputBlur(item,'nameCheck')"></el-input>
                <div v-if="item.nameCheck.isError" class="el-form-item__error">
                  {{item.nameCheck.errorTxt}}
                </div>
              </el-form-item>
              <el-form-item label="电话" label-width="90px"  :class="item.phoneCheck.isError?'is-error is-required':'is-required'">
                <el-input class="w174" v-model="item.phoneNumber" placeholder="请输入部门电话" @input="inputChange(item,'phoneCheck')"  @blur="inputBlur(item,'phoneCheck')"></el-input>
                <div v-if="item.phoneCheck.isError" class="el-form-item__error">
                  {{item.phoneCheck.errorTxt}}
                </div>
              </el-form-item> -->
              <el-form-item label="" label-width="20px" class="norequired">
                <el-input class="w174" v-model="item.name" placeholder="请输入部门名称"></el-input>
                <el-input class="w174" v-model="item.nameEn" placeholder="请输入部门英文名称" ></el-input>
              </el-form-item>
              <el-form-item label="" label-width="20px" class="norequired">
                <el-input class="w174" v-model="item.phoneNumber" placeholder="请输入部门电话"></el-input>
              </el-form-item>
              <i v-if="j==callList.length-1" class="iconfont icon-jiahao" @click="addCall('callList')"></i>
              <i v-else class="iconfont icon-jianhao" @click="delCall(item,j,'callList')"></i>
            </li>
          </ul>
        </el-form-item>
        <div></div>
        <el-form-item label="售后服务" class="formblock is-required" prop="afterSaleService">
          <quill-editor v-model="form.afterSaleService" ref="myQuillEditor" class="editer"
                  :options="{}" @ready="onEditorReady($event)">
          </quill-editor>
        </el-form-item>
        <el-form-item label="售后服务英文" class="formblock is-required" prop="afterSaleService">
          <quill-editor v-model="form.afterSaleServiceEn" ref="myQuillEditor" class="editer"
                  :options="{}" @ready="onEditorReady($event)">
          </quill-editor>
        </el-form-item>
        <el-form-item class="formblock">
          <el-button type="primary w200 mrauto mt20" round @click="save">保存</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
// import ueditor from './ue.vue' //调用编辑器
export default {
  name: 'contact',
  data () {
    return {
      form:{
        afterSaleService:'',
        afterSaleServiceEn:'',
        contactNumber:'',
        name:'',
        nameEn:'',
        // address:'',
        postcode:'',
        serviceDayStart:'',
        serviceDayEnd:'',
        serviceTime:'',
      },
      addressList:[{address:'',addressEn:''}],
      weeks:[{label:'周一',disabled:false},{label:'周二',disabled:false},{label:'周三',disabled:false},{label:'周四',disabled:false},{label:'周五',disabled:false},{label:'周六',disabled:false},{label:'周日',disabled:false}],
      weeksEnd:[{label:'周一',disabled:false},{label:'周二',disabled:false},{label:'周三',disabled:false},{label:'周四',disabled:false},{label:'周五',disabled:false},{label:'周六',disabled:false},{label:'周日',disabled:false}],
      callList:[{name:'',phoneNumber:'',nameEn:'',nameCheck:{isError:false,errorTxt:'请输入部门名称'},phoneCheck:{isError:false,errorTxt:'请输入部门电话'}}],
      weeksEn:['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
      rules:{
          // name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
          // address:[{ required: true, message: '请输入地址', trigger: 'blur' }],
          // postcode:[{ required: true, message: '请输入邮编', trigger: 'blur' }],
          // serviceDayStart:[{ required: true, message: '请选择客服开始时间', trigger: 'change' }],
          // serviceDayEnd:[{ required: true, message: '请选择客服结束时间', trigger: 'change' }],
          // serviceTime:[{ required: true, message: '请选择客服', trigger: 'change' }],
          // afterSaleService:[{ required: true, message: '请选择公司传真', trigger: 'blur' }],
          // salaryIntervalfrom:[
          //   { required: true, message: '请输入薪酬区间', trigger: 'blur' },
          //   {pattern: /^[0-9]*$/, message: '只能输入数字', trigger: 'blur' }
          // ],
          // salaryIntervalend:[
          //   // { required: true, message: '请输入薪酬区间', trigger: 'blur' },
          //   { validator: checkSalary, trigger: 'blur' }
          // ],
        }
    }
  },
  methods:{
    onEditorReady(ueditor){
          console.log(ueditor)
    },
    // 添加客服电话
    addCall(value){
      if(value=='callList'){
        this.callList.push({name:'',phoneNumber:'',nameEn:'',nameCheck:{isError:false,errorTxt:'请输入部门名称'},phoneCheck:{isError:false,errorTxt:'请输入部门电话'}});
      }else{
        this.addressList.push({address:'',addressEn:''});
      }
      
    },
    // 删除客服电话
    delCall(item,index,keyValue){
      this[keyValue].splice(index,1);
    },
    serviceDayStartChange(value){
      for(var i = 0;i<this.weeksEnd.length;i++){
        if(i<=value){
          this.weeksEnd[i].disabled=true;
        }else{
          this.weeksEnd[i].disabled=false;
        }
      }
    },
    save(){
      var param={};
      var flag=true;
      for(var j in this.form){
        if(this.form[j]==''){
          flag=false;
        }
        if(j=='serviceDayStart'||j=='serviceDayEnd'){
          if(this.form.serviceDayStart!=''&&this.form.serviceDayEnd!=''){
            param.serviceDay=this.weeks[this.form.serviceDayStart].label+'-'+this.weeks[this.form.serviceDayEnd].label;
            param.serviceDayEn=this.weeksEn[this.form.serviceDayStart]+'-'+this.weeksEn[this.form.serviceDayEnd];
          }
        }else if(j=='serviceTime'){
          if(this.form.serviceTime){
            param[j]=this.form.serviceTime.join('-');
          }else{
            param[j]=this.form.serviceTime;
          }
        }else{
          param[j]=this.form[j];
        }
      }
      if(flag){
          var reg=/^1[34578]\d{9}$/;
          var regGh=/^([0-9]{3,4}-)?[0-9]{7,8}$/;
          var numReg=/^[0-9]*$/;
          if(reg.test(param.contactNumber)||regGh.test(param.contactNumber)){
            if(!numReg.test(param.postcode)){
              this.$message.error('邮编只能输入数字');
              return false;
            }else{
              param.addressList=[];
              for(var i =0;i<this.addressList.length;i++){
                if(this.addressList[i].address==''||this.addressList[i].addressEn==''){
                  this.$message.error('您还有必填项没填哦！');
                  return false;
                }
                param.addressList.push({address:this.addressList[i].address,addressEn:this.addressList[i].addressEn});
              }
              param.hotlineList=[];
              for(var i =0;i<this.callList.length;i++){
                if(this.callList[i].name==''||this.callList[i].nameEn==''||this.callList[i].phoneNumber==''){
                  this.$message.error('您还有必填项没填哦！');
                  return false;
                }
                if(reg.test(this.callList[i].phoneNumber)||regGh.test(this.callList[i].phoneNumber)){

                }else{
                  this.$message.error(this.callList[i].name+'电话输入不正确');
                  return false;
                }
                param.hotlineList.push({name:this.callList[i].name,phoneNumber:this.callList[i].phoneNumber,nameEn:this.callList[i].nameEn});
              }
              param.addressList=JSON.stringify(param.addressList);
              param.hotlineList=JSON.stringify(param.hotlineList);
              this.$http.post(this.$store.state.httpApi + 'companyInfo/update',param).then(response =>{
                    if(response.status == 200){
                        if(response.data.success){
                            this.getInfo();
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            // this.$router.go(-1)
                        }else{
                            this.$message.error(response.data.error);
                        }       
                    }
                    },response => {
                        console.log('请求失败',response)
                })
            }
          }else{
            this.$message.error('公司电话输入不正确');
            return false;
          }
      }else{
        this.$message.error('您还有必填项没填哦！');
      }
      console.log(param)
    },
    getInfo(){
      this.$http.get(this.$store.state.httpApi + 'companyInfo/getCompanyInfo').then(response =>{
          if(response.status == 200){
              if(response.data.success){
                var that=this;
                console.log(response.data)
                for(var j in this.form){
                  if(response.data.data.companyInfo[j]){
                    this.form[j]=response.data.data.companyInfo[j];
                  }
                }
                var serviceDay=response.data.data.companyInfo.serviceDay.split('-');
                this.weeks.forEach(function (ele,j) {
                  if(serviceDay[0]==ele.label){
                    that.form.serviceDayStart=j;
                  }
                  if(serviceDay[1]==ele.label){
                    that.form.serviceDayEnd=j;
                  }
                })
                this.form.serviceTime=response.data.data.companyInfo.serviceTime.split('-');
                
                that.addressList=[];
                response.data.data.addressList.forEach(function (ele) {
                  that.addressList.push({address:ele.address,addressEn:ele.addressEn})
                })
                that.callList=[];
                response.data.data.hotLineList.forEach(function (ele) {
                  that.callList.push({name:ele.name,nameEn:ele.nameEn,phoneNumber:ele.phoneNumber})
                })
                console.log(this.form)
              }else{
                  this.$message.error(response.data.error);
              }       
          }
          },response => {
              console.log('请求失败',response)
      })
    }
  },
  computed: {
    
  },
  created(){
    this.getInfo();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .formlist li{
    margin-bottom:10px;
  }
  .formlist .iconfont{
    font-size:40px;
    color:#B28541;
    vertical-align: middle;
  }
  .formlist .icon-jianhao{
    font-size:40px;
    color:#F58467;
  }
</style>
